<template>
  <!-- 检查记录 -->
  <div class="goover-index">
    <a-row :gutter="12" class="aRow-wrapper">
      <a-col :span="4" class="tree-wrapper">
        <left-tree />
      </a-col>
      <a-col :span="20" class="listContent-wrapper">
        <div class="l-w_content">
          <top-title :content="content" :updateTime="true"></top-title>

          <div class="l-w_c_content">
            <div class="search-group">
              <div class="input-wrap">
                <div class="label">单位名称：</div>
                <div class="input-item">
                  <j-input
                    v-model="queryParam.companyMessageName"
                    :maxLength="30"
                    clearable
                    placeholder="请填写企业名称"
                    @change="company_message_name_change"
                  ></j-input>
                </div>
              </div>

              <div class="input-wrap">
                <div class="label">所属行业：</div>
                <div class="input-item">
                  <!-- <a-select ref="select" allowClear v-model="queryParam.industryInformationId" placeholder="请选择行业">
                    <a-select-option v-for="(item, index) in industryOption" :key="index" :value="item.value">
                      {{ item.text }}
                    </a-select-option>
                  </a-select> -->
                  <el-cascader
                    ref="cascaderRef"
                    v-model="industryCas"
                    :options="industryListTree"
                    :props="{ label: 'informationName', value: 'id', multiple: true }"
                    :show-all-levels="false"
                    class="cascader tradeCascader"
                    clearable
                    collapse-tags
                    placeholder="请选择所属行业"
                    @change="handleCasChange"
                  ></el-cascader>
                </div>
              </div>

              <div class="input-wrap">
                <div class="label">检查类型：</div>
                <div class="input-item">
                  <a-select
                    ref="select"
                    v-model="queryParam.industryExamineId"
                    allowClear
                    placeholder="请选择检查类型"
                    @click.native="getExamine"
                  >
                    <a-select-option v-for="(item, index) in examineIdOption" :key="index" :value="item.value">
                      {{ item.text }}
                    </a-select-option>
                  </a-select>
                </div>
              </div>

              <div class="input-wrap">
                <div class="label">检查民警：</div>
                <div class="input-item">
                  <j-input
                    v-model="queryParam.policeUserName"
                    :maxLength="30"
                    clearable
                    placeholder="请填写民警姓名"
                  ></j-input>
                </div>
              </div>

              <div class="input-wrap">
                <div class="label">检查/复查：</div>
                <div class="input-item">
                  <a-select ref="select" v-model="queryParam.checkType" allowClear placeholder="请选择检查/复查类型">
                    <a-select-option v-for="(item, index) in checkTypeOption" :key="index" :value="item.value">
                      {{ item.text }}
                    </a-select-option>
                  </a-select>
                </div>
              </div>

              <div class="input-wrap">
                <div class="label">检查结果：</div>
                <div class="input-item">
                  <a-select ref="select" v-model="queryParam.checkResult" allowClear placeholder="请选择检查结果">
                    <a-select-option v-for="(item, index) in checkResultOption" :key="index" :value="item.value">
                      {{ item.text }}
                    </a-select-option>
                  </a-select>
                </div>
              </div>

              <div class="input-wrap">
                <div class="label">检查时间:</div>
                <div class="time-item">
                  <!-- <start-end-time-init
                    :times="times"
                    :defaultValue="[
                      moment(new Date().getMonthBefore(), dateFormat),
                      moment(new Date().getEndData(), dateFormat),
                    ]"
                    :showTime="{ format: 'HH:mm:ss' }"
                    @timeChange="timeChange"
                  ></start-end-time-init> -->
                  <start-end-time
                    :resetTime="resetTime"
                    :showTime="{ format: 'HH:mm:ss' }"
                    :times="times"
                    format="YYYY-MM-DD HH:mm:ss"
                    @timeChange="timeChange"
                  ></start-end-time>
                </div>
              </div>

              <div class="btn-wrap">
                <a-button
                  class="searchBtn"
                  type="primary"
                  @click="searchQuery(queryParam.checkTime_begin, queryParam.checkTime_end)"
                >
                  搜索
                </a-button>
                <a-button class="resetBtn" type="primary" @click="resetHandle()"> 重置 </a-button>
              </div>
            </div>

            <div style="height: 6.3rem; overflow-y: auto">
              <a-table
                :columns="columns"
                :dataSource="dataSource"
                :pagination="ipagination"
                class="tableList"
                rowKey="id"
                @change="handleTableChange"
              >
                <template slot="companyMessageName" slot-scope="records">
                  <a-tooltip placement="top">
                    <template slot="title">
                      <span>{{ records }} </span>
                    </template>
                    <span>{{ records }} </span>
                  </a-tooltip>
                </template>
                <template slot="policeAgencyName" slot-scope="records">
                  <a-tooltip placement="top">
                    <template slot="title">
                      <span>{{ records }} </span>
                    </template>
                    <span>{{ records }} </span>
                  </a-tooltip>
                </template>
                <template slot="industryInformationName" slot-scope="records">
                  <a-tooltip placement="top">
                    <template slot="title">
                      <span>{{ records }} </span>
                    </template>
                    <span>{{ records }} </span>
                  </a-tooltip>
                </template>
                <template v-slot:action="records">
                  <span v-has="'goover:detail'" class="operation deatil-color" @click="detailsHandle(records)">
                    详情
                  </span>
                </template>
              </a-table>
            </div>
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { informationList, examineList } from '@/api/goover'
import { ajaxGetDictItems } from '@/api/api'
import { informationPage } from '@/api/industry'
import { getAction } from '@/api/manage'
import startEndTimeInit from '@/components/startEndTimeInit'
import startEndTime from '@/components/startEndTime'
import leftTree from '@/components/leftTree'
import topTitle from '@/components/topTitle'
import { Cascader } from 'element-ui'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import JInput from '@/components/jeecg/JInput'
import { mapState } from 'vuex'
import moment from 'moment'

export default {
  name: 'goover-index',
  components: { startEndTimeInit, startEndTime, leftTree, topTitle, JInput, 'el-cascader': Cascader },
  mixins: [JeecgListMixin],
  data() {
    return {
      cascaderRef: null,
      url: {
        list: '/police/check_task/page?checkStatus=3',
        tree: true,
      },
      disableMixinCreated: true,
      content: [['检查记录']],
      industryOption: [],
      examineIdOption: [],
      checkTypeOption: [],
      checkResultOption: [],
      industryCas: [],
      industryListTree: [],
      columns: [
        {
          title: '序号',
          align: 'center',
          width: 100,
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '单位名称',
          dataIndex: 'companyMessageName',
          ellipsis: true,
          align: 'center',
          scopedSlots: { customRender: 'companyMessageName' },
        },
        {
          title: '所属行业',
          dataIndex: 'industryInformationName',
          ellipsis: true,
          align: 'center',
          scopedSlots: { customRender: 'industryInformationName' },
        },
        {
          title: '所属派出所',
          dataIndex: 'policeAgencyName',
          ellipsis: true,
          align: 'center',
          scopedSlots: { customRender: 'policeAgencyName' },
        },
        {
          title: '检查民警',
          dataIndex: 'policeUserName',
          ellipsis: true,
          align: 'center',
          // scopedSlots: { customRender: 'policeUserName' },
        },
        {
          title: '检查类型',
          align: 'center',
          dataIndex: 'industryExamineName',
        },
        {
          title: '检查/复查',
          align: 'center',
          dataIndex: 'checkType_dictText',
        },
        {
          title: '检查结果',
          align: 'center',
          dataIndex: 'checkResult_dictText',
        },
        {
          title: '检查时间',
          dataIndex: 'checkTime',
          align: 'center',
          width: 180,
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' },
          align: 'center',
        },
      ],
      isorter: {
        column: 'checkTime',
        order: 'desc',
      },
    }
  },
  computed: {
    ...mapState({
      isPoliceAgencyId: (state) => state.user.isPoliceAgencyId,
    }),
  },
  watch: {
    isPoliceAgencyId(v) {
      this.queryParam.policeAgencyId = v.id ? v.id : ''
      this.searchQuery()
    },
  },
  mounted() {
    this.getClassify()
    this.industryCas = []
    this.getDictCas()

    if (this.$route.query.companyMessageId) {
      let params = this.$route.query
      this.queryParam = {
        ...params, // 合并对象
        checkType: '1',
      }
      setTimeout(() => {
        this.searchQuery()
      }, 2000)
    }
  },
  methods: {
    timeChange(v, index) {
      if (index == 1) {
        this.queryParam.checkTime_begin = this.$moment(v).valueOf()
      } else {
        this.queryParam.checkTime_end = this.$moment(v).valueOf()
      }
      if (v == null) {
        this.queryParam.checkTime_begin = null
        this.queryParam.checkTime_end = null
      }
    },

    resetHandle() {
      let id
      if (this.queryParam.policeAgencyId) {
        id = this.queryParam.policeAgencyId
      }
      this.queryParam = {}
      this.queryParam.policeAgencyId = id
      this.resetTime = true
      this.industryCas = []
      this.searchQuery()
    },

    company_message_name_change(e) {
      if (e == '**' && this.queryParam.companyMessageId) {
        this.queryParam.companyMessageId = ''
      }
    },

    detailsHandle(records) {
      //checkType  1.检查单  2.复查单
      //checkResult  1.合格  2.不合格
      //checkStatus  1.待检查 2.检查中 3.检查完成

      let { checkType, checkResult, policeCheckTaskId, id } = records

      this.$router.push({
        path: '/goover/gooverDetails/gooverDetails',
        query: { checkType, checkResult, policeCheckTaskId, id },
      })

      // if (records.checkType == 1 && records.checkResult == 1) {
      //   this.$router.push({ path: '/goover/detailsGooverModal', query: { records } })
      // } else {
      //   this.$router.push({ path: '/goover/noDetailsGooverModal', query: { records } })
      // }
    },

    async getDictCas() {
      let { result } = await informationPage()
      this.industryListTree = this.deleteChildren(result)
    },
    deleteChildren(arr) {
      let childs = arr
      for (let i = childs.length; i--; i > 0) {
        if (childs[i].children) {
          if (childs[i].children.length) {
            this.deleteChildren(childs[i].children)
          } else {
            delete childs[i].children
          }
        }
      }
      return arr
    },
    handleCasChange(e) {
      this.queryParam.industryInformationId = this.$refs.cascaderRef
        .getCheckedNodes()
        .map((item) => {
          return item.value
        })
        .join(',')
    },
    getClassify() {
      informationList().then((res) => {
        if (res.result.length) {
          this.industryOption = res.result.map((v) => ({
            text: v.informationName,
            value: v.id,
          }))
        }
      })

      ajaxGetDictItems({ code: 'check_task_type' }).then((res) => {
        if (res.code == 200) {
          this.checkTypeOption = res.result
        }
      })

      ajaxGetDictItems({ code: 'check_task_result' }).then((res) => {
        if (res.code == 200) {
          this.checkResultOption = res.result
        }
      })
    },

    getExamine() {
      this.examineIdOption = []
      if (!this.queryParam.industryInformationId) {
        this.$message.warn('请先选择所属行业')
        this.unitList = []
        return
      }

      examineList({ industryInformationId: this.queryParam.industryInformationId }).then((res) => {
        if (res.result.length) {
          this.examineIdOption = res.result.map((v) => ({
            text: v.industryExamineName,
            value: v.id,
          }))
        }
      })
    },
    // moment,
    // loadData(arg, num = 1) {
    //   setTimeout(() => {
    //     // if (arg === 1) {
    //     //   this.ipagination.current = 1
    //     //   this.getTimeStartOrEnd()
    //     // } else {
    //     //   this.queryParam.checkTime_begin = this.times[0].valueOf()
    //     //   this.queryParam.checkTime_end = this.times[1].valueOf()
    //     // }
    //     if (!num) {
    //       this.queryParam.checkTime_begin = this.times[0].valueOf()
    //       this.queryParam.checkTime_end = this.times[1].valueOf()
    //     }

    //     if (arg === 1 && num) {
    //       this.ipagination.current = 1
    //       this.getTimeStartOrEnd()
    //     }

    //     this.queryParam.pageNo = this.ipagination.current
    //     this.queryParam.pageSize = this.ipagination.pageSize

    //     getAction(this.url.list, this.queryParam).then((res) => {
    //       if (res.code == 200) {
    //         let { result } = res
    //         this.dataSource = result.records
    //         this.ipagination.total = result.total
    //       } else {
    //         this.$message.warning(res.message)
    //       }
    //     })
    //   }, 1000)
    // },

    // onSelectTree(selectedKeys, info) {
    //   this.queryParam.policeAgencyId = selectedKeys.length ? selectedKeys[0] : ''
    //   this.searchQuery()
    // },
    // searchQuery(num = 1) {
    //   this.loadData(1, num)
    //   this.resetTime = false
    // },

    // timeChange(v, index) {
    //   this.times = v
    //   this.queryParam.checkTime_begin = v[0].valueOf()
    //   this.queryParam.checkTime_end = v[1].valueOf()
    // },

    // getTimeStartOrEnd() {
    //   this.queryParam.checkTime_begin = new Date(new Date().getMonthBefore()).getTime()
    //   this.queryParam.checkTime_end = new Date().getTime()
    //   this.times = [
    //     moment(new Date().getMonthBefore(), this.dateFormat),
    //     moment(new Date().getEndData(), this.dateFormat),
    //   ]
    // },
  },
}
</script>
<style lang="less" scoped>
.goover-index {
  width: 100%;
  height: 100%;
  background: var(--theme-content-bg);
  .pageInfo {
    width: 100%;
    height: 100%;
  }
}
</style>
